<template>
  <a-card class="search-container" v-role="getPermCode(props?.PageDataHooks.dataInfo.pageType, 'searchForm')">
    <div class="search-content">
      <a-form :model="props?.PageDataHooks.dataInfo.searchForm" ref="searchRefForm">
        <a-row :gutter="24" justify="start" :style="{ marginLeft: 0, marginRight: 0 }">
          <a-col :span="4.8" :style="{ paddingLeft: 0, paddingRight: 0 }">
            <a-form-item
              :field="props?.PageDataHooks.dataInfo.field"
              label-col-flex="0px"
            >
              <a-input-search
                v-model="
                  props.PageDataHooks.dataInfo.searchForm[
                    props.PageDataHooks.dataInfo.field
                  ]
                "
                :placeholder="props?.PageDataHooks.dataInfo.searchPlaceholder"
                :style="{ width: '272px', height: '32px' }"
                allow-clear
                @keydown.enter="props.PageDataHooks.search"
              ></a-input-search>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="mark-container-search-btn">
      <a-button
        :style="{ marginRight: '16px', height: '32px' }"
        @click="props.PageDataHooks.reset"
        >重 置</a-button
      >
      <a-button
        type="primary"
        :style="{ height: '32px' }"
        @click="props.PageDataHooks.search"
        >查 询</a-button
      >
    </div>
  </a-card>
</template>
<script lang="ts" setup name="ConfigSearch">
import { getPermCode } from "../utils/useBaseData";
interface Prop {
  PageDataHooks: MarkPage.PageDataHooks;
}
const props = defineProps<Prop>();
</script>
<style lang="less" scoped>
@import url("../styles/markPage.less");
</style>
